<template>
	<view class="bg-[#F6F6F6] min-h-screen">
		<up-navbar title="门店地图" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
		<view class="p-[30rpx]">
			<view v-for="(item,index) in list" :key="index" class="rounded-[8rpx] border-[#fff] bg-[#FFF] p-[30rpx] flex relative mb-[24rpx]" :class="value == index ? 'active':''" >
				<view class="w-[446rpx] pr-[44rpx]" @click="checkItem(index)">
					<view class="text-[26rpx] text-[#333] font-bold mb-[20rpx]">{{ item.name }}</view>
					<view class="flex items-center mb-[20rpx]">
						<image src="../static/haddress.png" mode="scaleToFill" class="w-[20rpx] h-[20rpx] block shrink-0  mr-[4rpx]"/>
						<view class="text-[22rpx] text-[#999] font-normal tracking-[1rpx]">{{ item.province }}{{ item.city }}{{ item.area }}{{ item.address }}</view>
					</view>
					<view class="flex items-center">
						<image src="../static/htime.png" mode="scaleToFill" class="w-[20rpx] h-[20rpx] block shrink-0 mr-[4rpx]"/>
						<view class="text-[22rpx] text-[#999] font-normal tracking-[1rpx]">营业时间：{{ item.businessHours }}</view>
					</view>
				</view>
				<up-line direction="column" :hairline="false" length="182rpx" margin=""></up-line>
				<view class="flex flex-col items-center justify-center flex-1">
					<view class="text-[22rpx] text-[#46A7FD] mb-[8rpx]">进店选购</view>
					<view class="text-[20rpx] text-[#999] font-normal leading-[36rpx] ">距离{{item.distance}}km</view>
					<view class="flex items-center mt-[16rpx]">
						<image src="../static/bphone.png" mode="scaleToFill" class="w-[36rpx] h-[36rpx] block mr-[32rpx]" @click="callphone(item.mobile)"/>
						<image src="../static/baddress.png" mode="scaleToFill" class="w-[36rpx] h-[36rpx] block" @click=""/>
					</view>
				</view>
				<image v-if="value == index" src="../static/rgou.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block absolute bottom-[0] right-[0]"/>
			</view>
		</view>
	</view>
</template>

<script setup>
import {onLoad ,onReachBottom} from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { BindStore, GetStoreList } from '../../API/store';
import { showToast } from '../../utils/utils';
let value = ref(0)
let pageObj = ref({
	pageNum:1,
	pageSize:10,
	lng:'',
	lat:''
})
let total = ref(0)
let list = ref([])
function goback(){
	uni.navigateBack()
}
function gohome(){
	uni.switchTab({
		url:'/pages/index/index'
	})
}
function callphone(phone){
	uni.makePhoneCall({
		phoneNumber: phone //仅为示例，并非真实的电话号码
	})
}
function checkItem(index){
	uni.showModal({
		title: '提示',
		content: '是否确定换此门店',
		showCancel: true,
		success: async ({ confirm, cancel }) => {
			if(confirm){
			 	let data = await BindStore({storeId:list.value[index].id})
				showToast('切换成功')
				value.value = index
			}
		}
	})
}
async function getList(){
	let {rows,total} = await GetStoreList(pageObj.value)
	list.value = rows.map(item=>{
		item.distance = (item.distance/1000).toFixed(2)
		return item
	})
	total.value = total
}
onLoad(async ()=>{
	uni.getLocation({
		type: 'wgs84',
		geocode:true,//设置该参数为true可直接获取经纬度及城市信息
		success: async (res)=>{
		 	pageObj.value.lng = res.longitude
			pageObj.value.lat = res.latitude
			await getList()
		},
		fail: (err)=>{
			uni.showToast({
				title: '获取地址失败，将导致部分功能不可用',
				icon:'none'
			});
		}
	})
})
onReachBottom(async()=>{
	if(list.value.length < total.value){
		pageObj.value.pageNum++
		let { rows , total } = await GetStoreList(pageObj.value)
		list.value = list.value.concat(rows).map(item=>{
			item.distance = (item.distance/1000).toFixed(2)
			return item
		})
		total.value = total
	}else{
		showToast('没有更多了')
	}
})
</script>

<style scoped lang="scss">
.active{
	border: 1rpx solid #46A7FD;
}
</style>